<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="siteName" left-arrow fixed>
      <template #left>
        <van-icon name="more-o" size="24" @click="siteListShow" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <van-row class="black-box">
        <van-col span="12" class="col_l">
          <div class="homeBox_content">
            <div class="tit_2"></div>
            <div class="tit_1">{{$t('InverterPower')}}</div>
            <div class="tit_3">{{powerDatas.inverterPower | units('W',2)}}</div>
            <div class="tit_4">
              <span>{{$t('PVPower')}}</span>
              <p>{{powerDatas.pvPower | units('W',2)}}</p>
            </div>
            <div class="tit_4">
              <span>{{$t('GridPower')}}</span>
              <p>{{powerDatas.gridPower | units('W',2)}}</p>
            </div>
          </div>
        </van-col>
        <van-col span="12" class="col_r">
          <div class="homeBox_content">
            <div class="tit_2_1"></div>
            <div class="tit_1">{{$t('TodayYield')}}</div>
            <div class="tit_3">{{topDatas.dailyEnergy | units('kWh',2)}}</div>
            <div class="tit_4">
              <span>{{$t('MonthlyYield')}}</span>
              <p>{{topDatas.monthlyEnergy | units('kWh',2)}}</p>
            </div>
            <div class="tit_4">
              <span>{{$t('TotalYield')}}</span>
              <p>{{topDatas.totalEnergy | units('kWh',2)}}</p>
            </div>
          </div>
        </van-col>
      </van-row>
      <div class="box_ios" v-if="isIOS"></div>
      <div class="box_android" v-if="!isIOS"></div>
      <!-- 非充电站 -->
      <div class="myyuanpan" v-if="!isCharge">
        <div class="myyuanpan_text_1_t">{{$t('Solar')}}</div>
        <div class="myyuanpan_text_1_b">{{Math.abs(pv) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_2_t">{{$t('loadGenerator')}}</div>
        <div class="myyuanpan_text_2_b">{{Math.abs(loadPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_3_t">{{$t('Feedin')}}</div>
        <div class="myyuanpan_text_3_b">{{Math.abs(feedin) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_4_t">{{$t('Battery')}}</div>
        <div class="myyuanpan_text_4_b">{{Math.abs(battery) | numFilter(1,'%')}}</div>
        <div class="myyuanpan_text_4_b_1">{{Math.abs(batteryPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_5_b">{{Math.abs(grid) | numFilter(1,'W')}}</div>

        <div class="Z1" v-if="flow[0]"><img src="../assets/Z1.gif" alt=""/></div>
        <div class="Z2" v-if="flow[1]"><img src="../assets/Z2.gif" alt=""/></div>
        <div class="F2" v-if="flow[2]"><img src="../assets/F2.gif" alt=""/></div>
        <div class="Z3" v-if="flow[3]"><img src="../assets/Z3.gif" alt=""/></div>
        <div class="F3" v-if="flow[4]"><img src="../assets/F3.gif" alt=""/></div>
        <div class="Z4" v-if="flow[5]"><img src="../assets/Z4.gif" alt=""/></div>
        <div class="F4" v-if="flow[6]"><img src="../assets/Z2.gif" alt=""/></div>
        <div class="Z5" v-if="flow[7]"><img src="../assets/Z5.gif" alt=""/></div>
        <div class="F5" v-if="flow[8]"><img src="../assets/Z5.gif" alt=""/></div>

        <router-link :to="{path:'/solar'}" class="click1"></router-link>
        <router-link :to="{path:'/battery'}" class="click2"></router-link>
        <router-link :to="{path:'/siteinvlist'}" class="click3"></router-link>
        <router-link :to="{path:'/feedin'}" class="click4"></router-link>
        <router-link :to="{path:'/load'}" class="click5"></router-link>
      </div>
      <!-- 充电桩 -->
      <div class="cdzBox" v-if="isCharge">
        <div class="cdzBox_text_1_t">{{$t('Solar')}}</div>
        <div class="cdzBox_text_1_b">{{Math.abs(pv) | numFilter(1,'W')}}</div>
        <div class="cdzBox_text_2_t">{{$t('loadGenerator')}}</div>
        <div class="cdzBox_text_2_b">{{Math.abs(loadPower) | numFilter(1,'W')}}</div>
        <div class="cdzBox_text_3_t">{{$t('Feedin')}}</div>
        <div class="cdzBox_text_3_b">{{Math.abs(feedin) | numFilter(1,'W')}}</div>
        <div class="cdzBox_text_4_t">{{$t('Battery')}}</div>
        <div class="cdzBox_text_4_b">{{Math.abs(battery) | numFilter(1,'%')}}</div>
        <div class="cdzBox_text_4_b_1">{{Math.abs(batteryPower) | numFilter(1,'W')}}</div>
        <div class="cdzBox_text_5_b">{{Math.abs(grid) | numFilter(1,'W')}}</div>
        <div class="cdzBox_text_6_t">Charge</div>
        <div class="cdzBox_text_6_b">{{Math.abs(ChargerPower) | numFilter(1,'W')}}</div>

        <div class="pvtoinv" v-if="c_flow[0]"><img src="../assets/Z1.gif" alt=""/></div>
        <div class="battoinv" v-if="c_flow[1]"><img src="../assets/Z2.gif" alt=""/></div>
        <div class="invtobat" v-if="c_flow[2]"><img src="../assets/F2.gif" alt=""/></div>
        <div class="invtofeed" v-if="c_flow[3]"><img src="../assets/Z3.gif" alt=""/></div>
        <div class="feedtoinv" v-if="c_flow[4]"><img src="../assets/F3.gif" alt=""/></div>
        <div class="invtoload" v-if="c_flow[5]"><img src="../assets/Z6.gif" alt=""/></div>
        <div class="loadtoinv" v-if="c_flow[6]"><img src="../assets/F6.gif" alt=""/></div>
        <div class="invtocharge" v-if="c_flow[7]"><img src="../assets/Z1.gif" alt=""/></div>
        <div class="chargetoinv" v-if="c_flow[8]"><img src="../assets/F1.gif" alt=""/></div>
        <div class="feedtoload" v-if="c_flow[9]"><img src="../assets/Z1.gif" alt=""/></div>
        <div class="loadtofeed" v-if="c_flow[10]"><img src="../assets/F1.gif" alt=""/></div>
        <div class="chargetoload" v-if="c_flow[11]"><img src="../assets/Z2.gif" alt=""/></div>
        <div class="loadtocharge" v-if="c_flow[12]"><img src="../assets/F2.gif" alt=""/></div>

        <router-link :to="{path:'/solar'}" class="c_click1"></router-link>
        <router-link :to="{path:'/battery'}" class="c_click2"></router-link>
        <router-link :to="{path:'/siteinvlist'}" class="c_click3"></router-link>
        <router-link :to="{path:'/feedin'}" class="c_click4"></router-link>
        <router-link :to="{path:'/load'}" class="c_click5"></router-link>
        <router-link :to="{path:'/chargerlist'}" class="c_click6"></router-link>
      </div>
      <div class='echarts-goto-box' @click='gotoSiteDetail'>
        <div class="icon_1"><van-icon name="chart-trending-o" /></div>
        <div class="txt">{{$t('site.graphics')}}</div>
        <div class="icon_2"><van-icon name="arrow" /></div>
      </div>
      <van-row class="bottomBox">
          <van-col span="12" class="col_l">
            <div class="homeBox_content">
              <div class="tit_1">{{$t('Reduction')}}</div>
              <div class="tit_2_sitedetail"></div>
              <div class="tit_3_sitedetail">{{topDatas.CO2Reduction | numFilter(1,'kg')}}</div>
            </div>
          </van-col>
          <van-col span="12" class="col_r">
            <div class="homeBox_content">
              <div class="tit_1">{{$t('Electricity')}}</div>
              <div class="tit_2_1_sitedetail"></div>
              <div class="tit_3_sitedetail">{{Co2Datas.unit}} {{Co2Datas.value}}</div>
              <van-icon style="display:none" class="sale" color="#B4B4B4" size="30" name="arrow" />
            </div>
          </van-col>
      </van-row>
    </van-pull-refresh>
    <van-popup v-model="show" position="left" :style="{width:'80%',height:'100%'}">
      <div class="header scllor-box-header">
        <div class="siteBox" v-for="(site,i) in siteArr" :key="i" @click='checkoutSite(site)' :class='(site.showFirst == 1) ?"active":""'>
          <div class="siteTitBox">
            <div class="siteTit_l">{{site.siteName}}</div>
            <div class="default" v-if="i==0">{{$t('Default.Site')}}</div>
          </div>
          <div class="siteContentBox" >
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('PanelSize')}}</div>
              <div class="siteContentList_r">{{site.capacity | numFilter(2,'kW')}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('OnlineInverters')}}</div>
              <div class="siteContentList_r">{{site.inverterInlineNum}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="addSiteBox" @click='gotoScanAddSite'>
          <van-icon class="icons" name="add-o" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      isIOS:!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      siteName:localStorage.getItem('siteName'),
      tokenId:localStorage.getItem('tokenId'),
      siteId:localStorage.getItem('siteId'),
      isLoading:false,
      topDatas:'',
      powerDatas:'',
      Co2Datas:'',
      pv:'',
      loadPower:'',
      feedin:'',
      battery:'',
      batteryPower:'',
      grid:'',
      show:false,
      flow:[],
      c_flow:[],
      siteArr:[],
      fifteenRefresh:null,
      isCharge:false,
      ChargerPower:''
    }
  },
  methods: {
    gotoScanAddSite(){
      sessionStorage.setItem('setFrom','/main/sitedetail');
      this.$router.push({path:'/scan'});
    },
    checkoutSite(item){
      this.siteId = item.ids;
      this.siteName = item.siteName;
      localStorage.setItem('siteId',this.siteId);
      localStorage.setItem('siteName',this.siteName);
      sessionStorage.setItem('isInApp',1);
      this.siteTopData();
      this.getFlowChart();
      this.sitePower();
      this.siteEnergySave();
      this.siteArr.forEach(items=>{
        if(items.ids == item.ids){
          items.showFirst = 1;
        }else{
          items.showFirst = 0;
        }
      })
      this.show=false;
    },
    async getSiteListData(){
      let {result:{rows:res}} = await this.API.siteList(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'current':1,'size':1000,'siteName':''})
      this.siteArr = res;
      if(sessionStorage.isInApp==undefined){
        this.siteId = res.length&&res[0].ids;
        this.siteName = res.length&&res[0].siteName;
        localStorage.setItem('siteId',this.siteId);
        localStorage.setItem('siteName',this.siteName);
      }
      this.siteArr.forEach(items=>{
        if(items.ids == localStorage.siteId){
          items.showFirst = 1;
        }else{
          items.showFirst = 0;
        }
      })
      this.siteTopData();
      this.getFlowChart();
      this.sitePower();
      this.siteEnergySave();
      this.existCharger();
    },
    siteListShow(){
      this.show = true
    },
    gotoSiteDetail(){
      this.$router.push({path:'/sitechart/sitedetailchart'});
    },
    goElectricity(){
      this.$router.push({path:'/electricity'});
    },
    async siteTopData(){
      let data=await this.API.siteTopData(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId,
        'currentTime':moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        });
      if(data.success){
        this.topDatas=data.result;
      }
    },
    async sitePower(){
      let data=await this.API.homePower(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId,
        'currentTime':moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        });
      if(data.success){
        this.powerDatas=data.result;
      }
    },
    async siteEnergySave(){
      let data=await this.API.siteEnergySave(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
        });
      if(data.success){
        this.Co2Datas=this.convertUnit(data.result.price,data.result.currency);
      }
    },
    convertUnit(value,unitType){
      value=value||0;//设置value默认值
      value=Number(value);//value转换成number类型，防止toFixed报错
      if(isNaN(value)){
        return {value:'-',unit:''};
      }else{
        return {value:value.toFixed(2),unit:unitType};
      }
    },
    //流动图
    async getFlowChart(){
      this.comm.loadingShow();
      let res = await this.API.getFlowChart(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
      });
      if(res.success&&res.result.length!=0){
        let dataVal = JSON.parse(res.result[0]);
        this.pv=((dataVal.powerdc1||0)+(dataVal.powerdc2||0)+(dataVal.powerdc3||0)+(dataVal.powerdc4||0));
        this.feedin=dataVal.feedinpower||0;
        this.grid=dataVal.gridpower||0;
        this.loadPower=this.grid-this.feedin;
        this.batteryPower=dataVal.batPower1||0;
        //判断是否接电表
        if((this.feedin!=0&&this.feedin!=null) || (dataVal.feedinenergy!=0&&dataVal.feedinenergy!=null) || (dataVal.consumeenergy!=0&&dataVal.consumeenergy!=null)){
          this.isMeter=true;
        }else{
          this.isMeter=false;
        }
        //获取电池信息
        let datas = await this.API.getSiteBatterys(localStorage.getItem('domain'),{
          'tokenId':this.tokenId,
          'siteId':this.siteId
        });
        this.battery=datas.avgSoc||0;
        let batFlag=0;
        if(datas.batteryState==0){
          batFlag=-1;
        }else if(datas.batteryState==1){
          batFlag=1;
        }else{
          batFlag=0;
        }
        this.flow=this.comm.siteFlowChar(this.feedin,this.grid,this.pv,batFlag,this.loadPower,this.isMeter);
        this.getSiteCharge();
        this.c_flow=this.comm.siteEVchar(this.feedin,this.grid,this.pv,batFlag,this.loadPower,this.isMeter,this.ChargerPower);
      }
    },
    //判断是否有充电桩
    async existCharger(){
      this.comm.loadingShow();
      let res = await this.API.existCharger(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
      });
      this.isCharge=res;
    },
    //获取充电桩功率
    async getSiteCharge(){
      this.comm.loadingShow();
      let res = await this.API.getSiteCharge(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
      });
      this.ChargerPower=res.totalPower||0;
    },
    onRefresh(){
      this.isLoading=false;
      this.getSiteListData();
    },
  },
  mounted(){
    setTimeout(()=>{
      this.getSiteListData();
    },1000);
    this.fifteenRefresh=setInterval(()=>{
      this.getSiteListData();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">

.scllor-box-header{
  height: calc(100% - 50px);
  overflow-y: auto;
  .active{
    border-color:orange;
  }
}
.addSiteBox{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 100%;
  font-size: 38px;
  background: #e6e6e6;
  .icons{
    margin-top: 6px;
    color: #595758;
  }
}
.van-hairline--bottom::after{
  border: none;
}
.siteBox{
  margin-bottom: 15px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  font-size: 13px;
}
.siteTitBox{
  width: 100%;
  overflow: hidden;
  border-bottom: 1px dotted #e2e2e2;
}
.siteTit_l{
  float: left;
  height: 35px;
  line-height: 35px;
  color: #595758;
  font-weight: bolder;
  font-size: 16px;
  margin-left: 15px;
 }
 .default{
   float: left;
   margin: 7px 0 3px 10px;
   background: #F6A900;
   color: #fff;
   font-size: 12px;
   padding: 3px;
   border-radius: 10px;
 }
.siteContentBox{
 padding: 0 15px;
}
.siteContentList{
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.siteContentList_l{
  float: left;
  color: #B6B6B6;
}
.siteContentList_r{
  float: right;
  color: #444444;
}
.box_ios{
  width: 100%;
  height: 150px;
}
.box_android{
  width: 100%;
  height: 125px;
}
.black-box{
  width: 100%;
  height: 70px;
  background: #3B3D4E;
  padding-top: 5px;
}
.homeBox_content{
  background: #FFFFFF;
  border-radius: 6px;
  padding: 5px 8px;
  box-shadow: 1px 3px 6px #bbbbbb;
  text-align: left;
  position: relative;
  .tit_1{
    width: 100%;
    color: #585858;
    height: 25px;
    font-size: 15px;
  }
  .tit_2{
    width: 100%;
    height: 23px;
    margin-bottom: 3px;
    background: url("../assets/home1.png") no-repeat left / 23px;
  }
  .tit_2_sitedetail{
    width: 100%;
    height: 23px;
    background: url("../assets/site1.png") no-repeat left / 23px;
  }
  .tit_2_1{
    width: 100%;
    height: 23px;
    margin-bottom: 3px;
    background: url("../assets/home2.png") no-repeat left / 23px;
  }
  .tit_2_1_sitedetail{
    width: 100%;
    height: 23px;
    background: url("../assets/site2.png") no-repeat left / 23px;
  }
  .tit_3{
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    color: #595856;
    font-weight: bolder;
    font-size: 18px;
    padding: 4px 0;
  }
  .tit_3_sitedetail{
    width: 100%;
    color: #595856;
    font-weight: bolder;
    font-size: 18px;
    padding-top: 4px;
  }
  .tit_4{
    width: 100%;
    margin-top: 4px;
    color: #585858;
    span{
      font-size: 14px;
    }
    p{
      font-size: 16px;
      padding-top: 4px;
      margin: 0;
    }
  }
  .sale{
    position: absolute;
    top:43px;
    right: 2px;
  }
}
.col_l{
  padding:0 8px;
}
.col_r{
  padding-right:8px;
}
.myyuanpan{
  position: relative;
  color: #7A7A7A;
  width: 295px;
  height: 330px;
  margin: 0 auto 38px;
  background: url("../assets/remote.png") no-repeat center;
  background-size: 100% 100%;
}
.myyuanpan_text_1_t{
  position: absolute;
  width:95px;
  top:92px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_1_b{
  width:95px;
  position: absolute;
  top:61px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_2_t{
  position: absolute;
  width:120px;
  top:332px;
  right:-11px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_2_b{
  position: absolute;
  width:95px;
  top:300px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_3_t{
  width:100px;
  position: absolute;
  top:332px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_3_b{
  width:95px;
  position: absolute;
  top:300px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_4_t{
  position: absolute;
  width:95px;
  top:92px;
  right:0px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_4_b{
  position: absolute;
  width:95px;
  top:25px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_4_b_1{
  position: absolute;
  width:95px;
  top:61px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_5_b{
  position: absolute;
  width:95px;
  top:180px;
  left:100px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.Z1 img,.Z2 img,.F2 img,.Z3 img,.F3 img,.Z4 img,.F4 img,.Z5 img,.F5 img{
  width: 295px;
  height: 330px;
}
.Z1,.Z2,.F2,.Z3,.F3,.Z4,.Z5{
  position: absolute;
  width: 295px;
  height: 330px;
}
.F4{
  position: absolute;
  width: 295px;
  height: 330px;
  transform: rotateX(-180deg);
}
.F5{
  position: absolute;
  width: 295px;
  height: 330px;
  transform: rotateY(180deg);
}
.click1{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 95px;
  height: 95px;
}
.click2{
  position:absolute;
  display: block;
  top: 0; right: 0;
  width: 95px;
  height: 95px;
}
.click3{
  position: absolute;
  display: block;
  top: 124px;
  right: 98px;
  width: 95px;
  height: 82px;
}
.click4{
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 95px;
  height: 95px;
}
.click5{
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 95px;
  height: 95px;
}
.echarts-goto-box{
  width: 260px;
  height: 37px;
  margin: 0 auto;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  color: #8c8879;
  font-size: 16px;
  background: #FDD100;
  margin-bottom: 10px;
  .icon_1{
    font-size: 24px;
    margin: 6px 4px 0 0;
  }
  .txt{
    font-size: 18px;
    height: 37px;
    line-height: 37px;
  }
  .icon_2{
    font-size: 20px;
    margin: 8px 0 0 20px;
  }
}
.bottomBox{
  margin-top: 25px;
  height: 130px;
}
.cdzBox{
  position: relative;
  color: #7A7A7A;
  width: 342px;
  height: 375px;
  margin: 0 auto 38px;
  background: url("../assets/charge.png") no-repeat center;
  background-size: 100% 100%;
  .cdzBox_text_1_t{
    position: absolute;
    width:105px;
    top:103px;
    text-align: center;
    font-size: 14px;
  }
  .cdzBox_text_1_b{
    width:105px;
    position: absolute;
    top:68px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_2_t{
    position: absolute;
    width:120px;
    top:375px;
    right:111px;
    text-align: center;
    font-size: 14px;
  }
  .cdzBox_text_2_b{
    position: absolute;
    width:105px;
    top:342px;
    right:119px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_3_t{
    width:110px;
    position: absolute;
    top:294px;
    text-align: center;
    font-size: 14px;
  }
  .cdzBox_text_3_b{
    width:105px;
    position: absolute;
    top:259px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_4_t{
    position: absolute;
    width:105px;
    top:103px;
    right:0px;
    text-align: center;
    font-size: 14px;
  }
  .cdzBox_text_4_b{
    position: absolute;
    width:105px;
    top:29px;
    right:0px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_4_b_1{
    position: absolute;
    width:105px;
    top:67px;
    right:0px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_5_b{
    position: absolute;
    width:105px;
    top:166px;
    left:116px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .cdzBox_text_6_t{
    position: absolute;
    width:105px;
    top:295px;
    right:0px;
    text-align: center;
    font-size: 14px;
  }
  .cdzBox_text_6_b{
    position: absolute;
    width:105px;
    top:258px;
    left:235px;
    text-align: center;
    color:#EF8200;
    font-size: 12px;
  }
  .pvtoinv{
    position: absolute;
    transform: rotateX(52deg);
    top: -30px;
    left: 1px;
    img{
      width: 333px;
      height: 341px;
    }
  }
  .battoinv{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(52deg);
    top: -35px;
    left:16px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .invtobat{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(52deg);
    top: -36px;
    left:16px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .invtofeed{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(57deg);
    top: -15px;
    left:-15px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .feedtoinv{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(57deg);
    top: -15px;
    left:-14px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .invtoload{
    width: 90px;
    height: 150px;
    position: absolute;
    top: 187px;
    left:129px;
    img{
      width: 90px;
      height: 150px;
    }
  }
  .loadtoinv{
    width: 90px;
    height: 150px;
    position: absolute;
    top: 138px;
    left:122px;
    img{
      width: 90px;
      height: 150px;
    }
  }
  .invtocharge{
    position: absolute;
    transform: rotateX(52deg);
    top: 78px;
    left: 133px;
    img{
      width: 298px;
      height: 304px;
    }
  }
  .chargetoinv{
    width: 200px;
    height: 300px;
    position: absolute;
    transform: rotate(-23deg);
    top: 8px;
    left:76px;
    img{
      width: 200px;
      height: 300px;
    }
  }
  .feedtoload{
    position: absolute;
    transform: rotateX(47deg);
    top: 187px;
    left: 9px;
    img{
      width: 298px;
      height: 280px;
    }
  }
  .loadtofeed{
    position: absolute;
    transform: rotateX(47deg);
    top: 115px;
    left: -96px;
    img{
      width: 298px;
      height: 280px;
    }
  }
  .chargetoload{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(61deg);
    top: 147px;
    left:20px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .loadtocharge{
    width: 342px;
    height: 360px;
    position: absolute;
    transform: rotateX(63deg);
    top: 144px;
    left:21px;
    img{
      width: 255px;
      height: 357px;
    }
  }
  .c_click1{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 95px;
    height: 95px;
  }
  .c_click2{
    position:absolute;
    display: block;
    top: 0; right: 0;
    width: 95px;
    height: 95px;
  }
  .c_click3{
    position: absolute;
    display: block;
    top: 108px;
    right: 124px;
    width: 95px;
    height: 82px;
  }
  .c_click4{
    position: absolute;
    display: block;
    top: 197px;
    left: 0;
    width: 95px;
    height: 95px;
  }
  .c_click5{
    position: absolute;
    display: block;
    bottom: 0;
    right: 124px;
    width: 95px;
    height: 95px;
  }
  .c_click6{
    position: absolute;
    display: block;
    top: 197px;
    right: 0;
    width: 95px;
    height: 95px;
  }
}
</style>
